<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
		<!--<link rel="stylesheet" type="text/css" href="../../../css/aliplayer-min.css"/>-->
		<!--<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.4.0/skins/default/aliplayer-min.css" />
    <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.7.2/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.7.2/aliplayer-min.js"></script>-->
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-bar-transparent bxn2" onclick="backTop()">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left icon-transparent"></a>
			<a class="mui-icon mui-icon-share mui-pull-right icon-transparent" onclick="shareHref()"></a>
		</header>
		<!--<div style="position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;">
	<div id="lesson-video-content" style="height:100%"></div>
	<input type="hidden" value="{$liveUrl['url']}" id="url">
	<input type="hidden" value="{$liveUrl['nickname']}" id="nickname">
</div>-->
		
		<div v-cloak id="class_details">

			<div class="mui-content" id="refreshContainer">
				<div id="vBox" style="background: red; width: 100%; position: fixed; z-index: 99;">
					<div class="prism-player" id="J_prismPlayer" style="width: 100%; position: fixed; z-index: 99;"></div>
				</div>
				<img :src="details.largePicture" style="width: 100%;" />
				<div class="course_banner">
					
					<div class="course_dbt">
						<h3>{{details.title}}</h3>
						<p><span class="courseTime" v-cloak v-if="details.expiryMode =='date'">有效期：{{details.expiryStartDate}}~{{details.expiryEndDate}}</span>
							<span class="courseTime" v-cloak v-else-if="details.expiryMode =='forever'">有效期：永久有效</span>
							<span class="courseTime" v-cloak v-else-if="details.expiryMode =='days'">有效期：{{details.expiryDays}}天</span>
						</p>
					</div>
					<div class="fengeLine mb0"></div>
				</div>
				<div class="course_dbox">
					<div class="course_dnr">
						<div class="mui-slider" id="slider">
							<div class="eTitle">
								<a href="javascript:;" tab-index='1' @tap="select_tab($event)" :class="(tabIndex == '1') ? 'active' : ''">课程介绍<em></em></a>
								<a href="javascript:;" tab-index='2' @tap="select_tab($event)" :class="(tabIndex == '2') ? 'active' : ''">课程目录<em></em></a>
								<a href="javascript:;" tab-index='3' @tap="select_tab($event)" :class="(tabIndex == '3') ? 'active' : ''">主讲老师<em></em></a>
							</div>
							<div class="mui-slider-group">
								<div id="item1" :style="dinfindStyle1">
									<div class="course_ad" v-html="details.summary"></div>
								</div>
								<div id="item2" :style="dinfindStyle2">
									<div class="catalog course_ml">
										<!--课程列表的几种状态-->
										<ul>
											<li class="mui-table-view" v-for="(item, index) in mulu_list">
												<a class="cata_tt mui-table-view-cell" @click="video(details.id,item.id,item.type,item.status,details.largePicture,item.startTime,item.endTime)">
													<p>
														<em class="cata_num">{{index+1}}.</em>
														<em v-if="item.style=='black' && item.type=='live'" class="cata_ttime ellipsis">{{item.title}}</em>
														<em v-if="item.style=='gray'" class="cata_ttime ellipsis" style="color: #AFB3B7">{{item.title}}</em>
														<em v-if="item.type=='video'" class="cata_ttime ellipsis">{{item.title}}</em>
													</p>
													<p class="cata_status">
														<span v-if="item.type=='live'">{{item.status}}</span>
														<span v-if="item.type=='video'">视频 {{item.status}}分钟</span>
													</p>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<div id="item3" :style="dinfindStyle3">
									<div class="lecturer">
										<div class="lec_item" v-for="val in pig_tea">
											<div id="lec_photo">
												<img :src="val.smallAvatar" />
												<h5>{{val.nickname}} {{val.title}}</h5>
											</div>
											<div class="lec_info">
												<p v-html="val.about"></p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--免费课程-->
			<div class="fix_price">
				<div class="fix_box">
					<div class="fix_lp">
						<p class="fix_lp_price">
							<span class="fix_free" v-if="details.isFree == '1' && auditStatus == 'yes'">免费</span>
							<span class="fix_free" v-if="details.isFree == '0'"><em>￥</em>{{details.price}}</span>
						</p>
						<p class="studied">已有{{details.studentNum}}人在学</p>
					</div>
					<div class="fix_mp">
						<p class="qq_kefu" @click="qq">
							<a class="mui-icon mui-icon-consultation"></a><span>客服</span>
						</p>
						<p class="favorite" @click="favorite(details.id,details)">
							<a v-if="loginSta =='0'" class="mui-icon mui-icon-collect"></a>
							<a v-else-if="loginSta =='1' && collection_status =='NO'" class="mui-icon mui-icon-collect"></a>
							<a v-else-if="loginSta =='1' && collection_status =='YES'" class="mui-icon mui-icon-collected orange"></a>
							<span class="sc_txt">收藏</span>
						</p>
					</div>
					<div class="fix_rp fixStudyBtn">
						<a class="studyBtn" v-if="details.isFree == '0' && details.is_buy=='NO_PAY' && details.buyable== '0' " @tap="limit_course">限制课程</a>
						<a class="studyBtn" v-if="details.isFree == '1'" @tap="begin_learn">开始学习</a>
						<a class="studyBtn" v-if="details.isFree == '0' && details.is_buy=='NO_PAY'" @tap="buy(details.id,details.title,details.largePicture,details.price)">立即购买</a>
						<a class="studyBtn" v-if="details.isFree == '0' && details.is_buy=='YES_PAY'" @tap="begin_learn">开始学习</a>
						
					</div>
				</div>
			</div>

			<script src="../../../js/mui.min.js"></script>
			<script type="text/javascript" src="../../../js/h.min.js"></script>
			<script src="../../../js/public.js"></script>
			<script type="text/javascript" src="../../../js/jquery.min.js"></script>
			<script type="text/javascript" src="../../../js/tpl/courseDetail.js"></script>
			<script src="../../../js/vue.js"></script>
			<script src="../../../js/plusShare.js"></script>
			<!-- <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.7.1/skins/default/aliplayer-min.css" /> -->
			<link rel="stylesheet" href="../../../css/aliPlayer.css" />
			<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
			<!-- <script src="https://g.alicdn.com/de/prismplayer/2.7.1/aliplayer-h5-min.js"></script> -->
			<script charset="UTF-8" src="../../../js/aliPlayer.js"></script>
		</div>
	</body>
</html>
